class Icons {
    static tipShowClass = null;
    static tipId = null;
    static copy = function(text) {
        var input = document.createElement('input');
        input.setAttribute('readonly', 'readonly'); // 防止手机上弹出软键盘
        input.setAttribute('value', text);
        document.body.appendChild(input);
        // input.setSelectionRange(0, 9999);
        input.select();
        var res = document.execCommand('copy');
        document.body.removeChild(input);
        Icons.tipId.classList.add(Icons.tipShowClass);
        setTimeout(() => {
            Icons.tipId.classList.remove(Icons.tipShowClass);
        },2000);
        return res;
    }
    constructor(domGetter) {
        this.tip = null;
        this.icons = null;
        this.id = `tip_${new Date().getTime()}_${parseInt(Math.random() * 1000)}`;
        this.init(domGetter);
    }
    init(domGetter) {
        document.head.innerHTML += `<style>
.${this.id}-top {
width: 100%;
height: 100%;
overflow-y: scroll;
padding: 10px 0 20px;
box-sizing: border-box;
}
.${this.id}-top::-webkit-scrollbar-track-piece {
    background-color:#f8f8f8;
}
.${this.id}-top::-webkit-scrollbar {
    width:1px;
    height:9px;
}
.${this.id}-top::-webkit-scrollbar-thumb {
    background-color:#dddddd;
    background-clip:padding-box;
    min-height:28px;
}
.${this.id}-top::-webkit-scrollbar-thumb:hover {
    background-color:#bbb;
}
#${this.id} {
            width: 200px;
            position: fixed;
            margin: 0 auto;
            text-align: center;
            left: calc(50vw - 100px);
            background: #4caf50;
            line-height: 30px;
            height: 30px;
            font-size: 18px;
            border-radius: 0 0 5px 5px;
            transition: top 2s;
            top: -30px;
        }
        .${this.id}-show {
            top: 0px !important;
        }
        .${this.id}-iconDiv {
            float: left;
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            cursor: pointer;
        }
</style>`;
        Icons.tipShowClass = `${this.id}-show`;
        this.icons = document.createElement('div');
        this.icons.id = `${this.id}-icons`;
        domGetter().append(this.icons);
        this.icons.classList.add([`${this.id}-top`]);
        // this.icons
        // this.icons = `<div id="icons" style="width: 80vw;margin: 30px auto;"></div>`
        this.tip = document.createElement('div');
        this.tip.innerText = '复制成功';
        document.body.append(this.tip);
        this.tip.id = this.id;
        Icons.tipId = this.tip;
    }
    initIcon(icons,onclick) {
        if (!this.icons.parentElement) {
            this.icons = document.getElementById(`${this.id}-icons`);
        }
        onclick = onclick || (() => {});
        icons.forEach(icon => {
            this.icons.innerHTML += `<div class="${this.id}-iconDiv" icon="${icon}"><i class="inco">
                <span class="icons-product-md ${icon}"></span>
            </i></div>`;
        });
        let iconDivs = document.getElementsByClassName(`${this.id}-iconDiv`);
        for (let i = 0;i < iconDivs.length;i++) {
            let span = iconDivs[i].getElementsByClassName('icons-product-md')[0];
            span.style.lineHeight = '80px';
            span.style.height = '80px';
            iconDivs[i].style.boxSizing = 'border-box';
            iconDivs[i].onmouseover = function () {
                // this.style.transform = 'scale(1.5)';
                // this.style.fontsize = ''
                // let span = this.getElementsByClassName('icons-product-md')[0];
                // span.style.fontsize = '60px';
                this.style.border = '1px solid';
                this.style.color = '#d22cbd';
            }
            iconDivs[i].onmouseleave = function () {
                // this.style.transform = 'scale(1)';
                // let span = this.getElementsByClassName('icons-product-md')[0];
                // span.style.fontsize = '48px';
                this.style.color = '#000';
                this.style.border = 'unset';
            }
            iconDivs[i].onclick = function () {
                let icon = this.getAttribute('icon');
                onclick(icon)
                Icons.copy(icon);
            }
        }
    }
}
